<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
    <link type="text/css" rel="stylesheet"
          href="${pageContext.request.contextPath}/static/bootstrap-3.3.7/css/bootstrap.min.css"/>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <style>
        .box {
            width: 502px;
            height: 40px;
            background-color: #000000;
            border-radius: 5px;
            transition: width 2s;
            position: relative;
        }

        #li1 {
            font-size: 16px;
            font-weight: 400;
        }

        #li2 {
            font-size: 16px;
            font-weight: 400;

        }

        #li3 {
            font-size: 16px;
            font-weight: 400;
        }

        #li4 {
            font-size: 16px;
            font-weight: 400;
        }

        #user-flag {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #2aabd2;
            opacity: 80%;
            float: right;
            margin-left: 1400px;
            margin-right: 40px;
            top: 30px;
            right: 1px;
            color: white;
            font-size: 20px;
            line-height: 80px;
            text-align: center;
        }

        .row {
            position: relative;
        }

        #page_info_area {
            position: absolute;
            margin: 122px auto auto 360px;
            font-weight: 400;
            font-size: 15px;
        }

        #page_nav_area {
            position: absolute;
            margin: 95px auto auto 600px;
            font-weight: 400;
            font-size: 15px;
        }
    </style>

</head>
<body>
<script>
    //总记录数
    var totalRecord, currentPage,pages;

    $(function () {
        toUserPage(1);
        $("#li1").click(function () {
            toUserPage(1);
        });
        $("#li2").click(function () {
            UserAdd();
        });
        $("#li3").click(function () {
            UpdatePassword();
        });

        $("#li4").click(function () {
            userLogout();
        });

        /*  $(".delete_btn").click(function () {

          });*/

        $(document).on("click", ".delete_btn", function () {
            //1，弹出是否确认删除对话框
            var empName = $(this).parents("tr").find("td:eq(1)").text();
            var empId = $(this).attr("del-id");
            if (confirm("确认删除【" + empName + "】吗？")) {
                //发送ajax请求删除
                $.ajax({
                    url: "${pageContext.request.contextPath}/user/delUser.do?uid=" + empId,
                    type: "get",
                    success: function (data) {
                        //回到本页
                        toUserPage(currentPage);
                    }
                });
            }
        });

        //单机编辑按钮显示编辑用户模态框
        $(document).on("click", ".edit_btn", function () {
            //获得用户id
            var uId = $(this).attr("edit-id");
            $("#emp_update_btn").attr("edit-id", uId);

            $("#myModal").modal({
                backdrop: "static"
            });
        })

        //用户修改信息的ajax请求
        $("#emp_update_btn").click(function () {
            var targetUrl = $("#editForm").attr("action");
            //序列化表单
            var data =  "id="+$(this).attr("edit-id")+"&"+$("#editForm").serialize();//将id值：拼接到表单数据后
            $.ajax({
                url: targetUrl,
                type: "post",
                data: data,
                contentType:"application/x-www-form-urlencoded",//从浏览器发送服务器的参数的类型。
                processData: false,
                dataType:"text",//期望服务器返回的数据类型
                success: function (data) {
                    //回到本页
                    if (data == 1) {
                        alert("修改成功");
                    }
                    //手动隐藏模态框
                    $("#myModal").modal("hide");
                    toUserPage(currentPage);
                }
            })
        })
    });



    //UserQuery获取User数据ajax请求
    function toUserPage(pageId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/user/queryUser.do?pageNumber=" + pageId,
            type: "get",
            dataType: "json",
            success: function (data) {
                //显示用户
                build_users(data);
                //显示记录文本
                built_page_info(data);
                //分页
                built_page_nav(data);

            }
        });

    }

    //解析显示用户
    function build_users(data) {
        var userList = data.list;
        //清除旧的数据
        $("#content").html("");

        var tab = $("<table></table>").append($("<tr style='font-weight: 900'></tr>").append(" <td >UserId</td>" +
            "<td >UserName</td>" +
            "<td >Age</td>" +
            "<td ></td>"));
        var tb = $("<tbody></tbody>").addClass("tBody");

        //添加新的数据
        $.each(userList, function (i, n) {
            var tdId = $("<td></td>").append(n.id);
            var tdName = $("<td></td>").append(n.name);
            var tdAge = $("<td></td>").append(n.age);
            var editButton = $("<button></button>").append("修改").addClass("btn btn-primary edit_btn");
            //为编辑按钮添加一个自定义的属性，来表示当前员工的id
            editButton.attr("edit-id", n.id);
            var delButton = $("<button style='margin-left: 5px'></button>").append("删除").addClass("btn btn-danger delete_btn");
            //为删除按钮添加一个自定义的属性来表示当前删除员工的id
            delButton.attr("del-id", n.id)
            var td = $("<td></td>").append(editButton).append(delButton);
            tb.append($("<tr></tr>")
                .append(tdId)
                .append(tdName)
                .append(tdAge)
                .append(td)
            );
        });
        $("#content").append(tab.addClass("table table-hover").append(tb));
    }

    //解析显示分页信息
    function built_page_info(data) {
        //清空原有数据
        $("#page_info_area").empty();
        totalRecord = data.total;
        currentPage = data.pageNum;
        pages=data.pages;
        $("#page_info_area").append("<span></span>").addClass("glyphicon glyphicon-grain").attr("aria-hidden", "true");
        $("#page_info_area").append("当前" + currentPage + "页，总"
            + data.pages + "页,总"
            + totalRecord + "条记录");
    }

    //解析显示分页表
    function built_page_nav(data) {
        //置空
        $("#page_nav_area").empty();

        var ul = $("<ul></ul>").addClass("pagination");

        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));

        var lastPageLi = $("<li id='last_nav_li'></li>").append($("<a></a>").append("尾页").attr("href", "#"));

        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href", "#"));

        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href", "#"));

        //如果没有上一页，设置格式为“disabled”
        if (!data.hasPreviousPage) {
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        } else {
            firstPageLi.click(function () {
                toUserPage(1);
            });

            //上一页
            prePageLi.click(function () {
                toUserPage(data.pageNum - 1);
            });
        }

        //如果没有下一页，设置格式为“disabled”
        if (!data.hasNextPage) {
            lastPageLi.addClass("disabled");
            nextPageLi.addClass("disabled");
        } else {
            lastPageLi.click(function () {
                toUserPage(data.pages);
            });

            nextPageLi.click(function () {
                toUserPage(data.pageNum + 1);
            });
        }

        //添加首页和前一页提示
        ul.append(firstPageLi).append(prePageLi);

        //遍历给ul中添加页码提示
        $.each(data.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
            if (item == data.pageNum) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                toUserPage(item);
            });
            ul.append(numLi);
        });

        //添加下一页和末页的提示
        ul.append(nextPageLi).append(lastPageLi);

        //将ul添加到nav元素中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");

    }
    //用户退出登录的ajax请求
    function userLogout() {
        if (confirm("确定要退出么?")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/userManager/userLogout.do",
                //data: "nowUser=${UserManager}",
                // type: "post",
                dataType: "text",
                success: function (result) {
                    if (result == 1) {
                        alert("退出成功！");
                        location.replace("${pageContext.request.contextPath}/");
                    }
                    ;
                }
            });
        }
    }

    //用户管理员修改密码的ajax请求
    function userModifyPWD() {
        var targetUrl = $("#upPwd").attr("action");
        var data = $("#upPwd").serialize();
        $.ajax({
            type: "post",
            url: targetUrl,
            //cache: false,
            data: data, //重点必须为一个变量如：data
            dataType: "text",
            contextType: "application/json",
            success: function (result) {
                if (result == 1) {
                    alert("修改成功");
                    location.replace("${pageContext.request.contextPath}/");
                }
            },
            error: function () {
                alert("field")
            }
        });
    }

    //添加用户的ajax请求
    function userAddAjax() {
        var targetUrl = $("#uAdd").attr("action");
        var data = $("#uAdd").serialize();
        $.ajax({
            type: "post",
            url: targetUrl,
            data: data,
            dataType: "text",
            success: function (result) {
                if (result == "success") {
                    alert("添加成功");
                    toUserPage(pages);
                } else {
                    alert("添加失败");
                }
            },
            error: function () {
                alert("field")
            }
        });
    }

    //鼠标单机UserAdd添加新用户
    function UserAdd() {

        //清除旧的数据
        $("#content").html("");

        $("#content").append("<form id='uAdd' class='form-horizontal' action='${pageContext.request.contextPath}/user/userAdd.do' method='post'>" +
            "        <div class='form-group'>" +
            "            <label for='inputEmail3' class='col-sm-2 control-label'>用户名：</label>" +
            "            <div class='col-sm-10'>" +
            "                <input type='text' class='form-control' id='inputEmail3' name='name' placeholder='UserName'>" +
            "            </div>" +
            "        </div>" + "<br/><br/>" +
            "        <div class='form-group'>" +
            "            <label for='inputPassword3' class='col-sm-2 control-label'>年龄：</label>" +
            "            <div class='col-sm-10'>" +
            "                <input type='text' class='form-control' id='inputPassword3' name='age' placeholder='Age'>" +
            "            </div>" +
            "        </div>" +
            "    </form>" +
            "        <div class='form-group'>" +
            "            <div class='col-sm-offset-2 col-sm-10'>" +
            "                <a onclick='userAddAjax();' class='btn btn-default' style='margin:50px auto auto 350px;'>注册</a>" +
            "            </div>" +
            "        </div>"
        )
    };

    //鼠标单击显示修改密码表单
    function UpdatePassword() {
        //清除旧的数据
        $("#content").html("");

        $("#content").append("<form id='upPwd' class='form-horizontal' action='${pageContext.request.contextPath}/userManager/changePwd.do' method='post'>" +
            "        <div class='form-group'>" +
            "            <label class='col-sm-2 control-label'>Manager Name:</label>" +
            "            <div class='col-sm-10'>" +
            "                <p class='form-control-static'>${UserManager.username}</p>" +
            "            </div>" +
            "        </div>" +
            "        <div class='form-group'>" +
            "            <label for='inputPassword' class='col-sm-2 control-label'>New Password:</label>" +
            "            <div class='col-sm-10'>" +
            "                <input type='password' class='form-control' id='inputPassword' name='password' placeholder='New Password'>" +
            "            </div>" +
            "        </div>" + "<br/>" +
            "    </form>" +
            "        <a onclick='userModifyPWD();' class='btn btn-default' style='margin:20px auto auto 480px'>修改</a>"
        )
    };


</script>
<div style="width: 99%; height: 90%; margin:50px auto auto 20px; padding: 2px; ">

    <div class="box">
        <ul class="nav nav-pills">
            <li id="li1"><a href="#">UserQuery</a></li>
            <li id="li2"><a href="#">UserAdd</a></li>
            <li id="li3"><a href="#">change password</a></li>
            <li id="li4"><a href="#">Logout Account</a></li>
        </ul>
    </div>
    <%--<div><img src="${pageContext.request.contextPath}/static/image/111111.png" width="200" height="80"/></div>--%>
    <div id="user-flag">${UserManager.username}</div>

    <%--显示查询的用户--%>
    <div id="content" style="width: 70%; height:350px;
        margin:30px auto; padding: 50px; ">

    </div>
    <!--显示分页信息-->
    <div class="row">
        <!--分页文字信息-->
        <div class="col-md-6" id="page_info_area">

        </div>
        <!--分页条信息-->
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
</div>

<!-- Modal  修改用户模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改用戶</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" action="${pageContext.request.contextPath}/user/editUser.do" method="post">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">name:</label>
                        <input type="text" class="form-control" id="recipient-name" name="name"/>
                    </div>
                    <div class="form-group">
                        <label for="recipient-age" class="control-label">age:</label>
                        <input type="text" class="form-control" id="recipient-age" name="age"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="emp_update_btn" type="button" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
